<template>
  <div class="echarts">
    <div class="unit" v-if="unit">单位：{{ unit }}</div>
    <ECharts ref="chartInfo" :option="option" :on-click="clickBar" />
  </div>
</template>

<script setup lang="ts" name="BarEcharts">
import ECharts from "@/components/ECharts/index.vue";
import { onMounted, reactive, watch, ref } from "vue";

const props = defineProps({
  data: {
    type: Array,
    required: false,
    default: () => []
  },
  colorList: {
    type: Array,
    required: false,
    default: () => []
  },
  name: {
    type: String,
    required: false,
    default: ""
  },
  unit: {
    type: String,
    required: false,
    default: "个"
  }
});
const chartInfo = ref<InstanceType<typeof ECharts> | null>(null);
const option: any = reactive({
  // title: {
  //   text: "单位：个",
  //   textStyle: {
  //     color: "rgba(0, 0, 0, 0.6)",
  //     fontSize: 12
  //   }
  // },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },
  // toolbox: {
  //   feature: {
  //     saveAsImage: {}
  //   }
  // },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    top: "42px",
    containLabel: true
  },
  legend: {
    data: [],
    right: "20px",
    icon: "rect",
    itemWidth: 16, // 设置图例图标的宽度
    itemHeight: 16, // 设置图例图标的高度
    itemGap: 30 // 设置图例项之间的间距
  },
  xAxis: [
    {
      type: "value",
      axisLabel: {
        color: "#a1a1a1",
        show: false
      },
      axisLine: { show: false }, // 不显示轴线
      axisTick: { show: false }, // 不显示刻度
      splitLine: { show: false }
    }
  ],
  yAxis: [
    {
      type: "category",
      // boundaryGap: false,
      data: [],
      axisLabel: {
        color: "#a1a1a1"
      },
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      // max: 4,
      inverse: true // 翻转顺序
    }
  ],
  // dataZoom: [
  //   {
  //     type: "slider", // 这个 dataZoom 组件是 slider 类型
  //     start: 0, // 数据窗口的起始百分比，表示从数据的 0% 开始
  //     end: 20 // 数据窗口的结束百分比，表示到数据的 20% 结束
  //   }
  // ],
  series: [
    {
      type: "bar",
      stack: "one",
      emphasis: {
        focus: "series"
      },
      data: [],
      barWidth: 20,
      barCategoryGap: "20%",
      barGap: 20
    }
  ]
});

const setOption = () => {
  // chartInfo.value?.getInstance()?.clear();
  const data: any = props.data || [];
  // const name = props.name || "";
  option.yAxis[0].data = data.map(a => a.name);
  option.series[0].data = data.map(a => a.value);
  if (props.colorList && props.colorList.length) {
    option.color = props.colorList;
  }
  // chartInfo.value?.getInstance()?.resize({ animation: { duration: 300 } });
};
const emit = defineEmits(["clickBar"]);
const clickBar = e => {
  emit("clickBar", e.name);
};
watch(
  () => props.data,
  () => {
    setOption();
  }
);

onMounted(() => {
  setOption();
});
</script>

<style scoped lang="scss">
.echarts {
  position: relative;
  width: 100%;
  height: 100%;
  .unit {
    position: absolute;
    top: 10px;
    right: 0;
    font-size: 12px;
    color: var(--el-text-color-primary);
  }
}
</style>
